<template>
  <div class="flex-box">
    <el-input v-model="leftNum" @input="onInput"></el-input>
    <div class="line"></div>
    <el-input v-model="rightNum" @input="onInput"></el-input>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits, watch } from "vue";
import { ElInput } from "element-plus";

const props = defineProps({
  modelValue: {
    type: Array as () => string[],
    default: () => [],
  },
});

const emits = defineEmits(["update:modelValue"]);

const leftNum = ref("");
const rightNum = ref("");

watch(
  () => props.modelValue,
  () => {
    setDefaultValue();
  },
  { deep: true }
);

function setDefaultValue() {
  if (props.modelValue && props.modelValue.length) {
    leftNum.value = props.modelValue[0];
    if (props.modelValue.length > 1) {
      rightNum.value = props.modelValue[1];
    }
  } else {
    leftNum.value = "";
    rightNum.value = "";
  }
}
setDefaultValue();

function onInput() {
  const data = [leftNum.value, rightNum.value];
  emits("update:modelValue", data);
}
</script>

<style lang="scss" scoped>
.line {
  width: 10px;
  height: 1px;
  background-color: #999;
  margin: 0 5px;
  flex-shrink: 0;
}
.flex-box {
  display: flex;
  align-items: center;
  width: 150px;
  .el-input {
    flex-shrink: 0;
    width: auto;
    ::v-deep(.el-input__inner) {
      width: 65px !important;
      padding: 0 10px;
    }
  }
}
</style>
